<template>
	<view>
        <view class="list-header">
            <view :class="index ? 'date-item' : 'date-item active'" v-for="(item,index) in dates" :key="index">
                <vew>
                    <view class="date">2月2{{index}}</view>
                    <view class="status">{{index ? '未开始' : '进行中'}}</view>
                </vew>
            </view>
        </view>
		<view class="list-box">
		    <view class="goods-item" v-for="(item,index) in listData" data-flex="box:first" :key="index">
		        <image class="goods-img" src="/static/langwen/item.png" mode=""></image>
                <view class="goods-info">
                    <view class="name">商品名称商品名称商品名…</view>
                    <view class="desc">这里是商品介绍、这里是商品介绍、这里是商品介绍,这里是商品…</view>
                    <view class="info">
                        <text>团购价：￥240</text>
                        <text class="disable">￥300</text>
                    </view>
                </view>
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dates: [{},{},{},{},{},{},{},{},{},{}],
                listData: [{},{},{},{},{},{},{},{},{},{}]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
    .goods-item {
        margin: 20rpx;
        background-color: #fff;
        border-radius: 20rpx;
        padding: 30rpx;
        .goods-img {
            width: 160rpx;
            height: 216rpx;
            margin-right: 24rpx;
        }
        .goods-info {
            .name {
                font-size: 32rpx;
                font-weight:400;
                color:rgba(51,51,51,1);
            }
            .desc {
                margin: 20rpx 0 30rpx;
                font-size: 28rpx;
                font-weight:400;
                color:rgba(191,191,191,1);
            }
        }
        .info {
            font-size: 28rpx;
            font-weight: 600;
            color: rgba(255,101,24,1);
            .disable {
                margin-left: 20rpx;
                color: #BFBFBF;
                text-decoration: line-through;
            }
        }
    }
    .list-header {
        display: -webkit-box;
        overflow-x: scroll;
        height: 134rpx;
        width: 100%;
        .date-item {
            display: flex;
            align-items: center;
            margin: 0 10px;
            color: rgba(255, 255, 255, 0.6);
            text-align: center;
            .date {
                font-size: 32rpx;
                font-weight: 600;
            }
            .status {
                font-size: 24rpx;
                font-weight: 500;
            }
            &.active {
                color: #fff;
                .date {
                    font-size: 40rpx;
                }
            }
        }
    }
    
    page {
        background-image: url(../../static/index_bg.png);
        background-size: 100%;
        background-repeat: no-repeat;
        background-color: #F5F5F5;
        background-position-y: -1px;
    }
</style>
